<template>
  <div class="shouye">

    <header>
      <input type="text" placeholder="输入商家/商品名称">
    </header>

    <main>
      <div class="ban">
        <div class="banner">
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b3895b5a9e7ea801215c8f420efc.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668692721&t=7ffc61633665617956d2b84f8e8478df" alt="">
        </div>
      </div>

      <h4 style="margin-top:10px;">猜你喜欢</h4>

      <div class="paixu">
        <span v-for='(item,index) in paixuArr' :key="index" @click='qiehuan(index)' :class="{active:paixuxiabao == index}">
          {{item}}
        </span>
      </div>

      <div class="shopping" v-for='(item,index) in shoopingArr' :key="index">
        <div class="left">
          <div class="img">
            <img :src="item.picUrl" alt="">
          </div>
        </div>

        <div class="right">
          <div class="sppp">
            <h3>{{item.name}}</h3>
            <span>{{item.minPriceTip}}</span>
            <span>{{item.minPriceTip}}</span>
            <span>{{item.deliveryTimeTip}}</span>
            <span>{{item.distance}}</span>
            <span>{{item.wmPoiScore}}</span>
          </div>
        </div>
      </div>

    </main>
  </div>
</template>

<script>
import { shop_list } from "../../axios/api";

export default {
  data() {
    return {
      paixuxiabao: 0,
      paixuArr: ['综合排序', '距离最近', '销量最高', '筛选'],
      shoopingArr: []
    }
  },

  methods: {
    qiehuan(index) {
      this.paixuxiabao = index;
      if (index == 1) {
        this.shoopingArr.sort((a, b) => {
          return a.wmPoiScore - b.wmPoiScore;
        });
      }
      if (index == 2) {
        this.shoopingArr.sort((a, b) => {
          return b.wmPoiScore - a.wmPoiScore;
        });
      }
      if (index == 3) {
        this.shoopingArr.sort((a, b) => {
          return a.wmPoiScore - b.wmPoiScore;
        });
      }
    }
  },
  mounted() {
    shop_list().then(
      response => {
        console.log(response.data);
        this.shoopingArr = response.data.list
      }
    )
  }
}
</script>

<style lang='scss' scoped>
.shouye {
  width: 100%;
  height: 100%;
}

main {
  width: 100%;
  height: 100%;

  .shopping {
    width: 100%;
    height: 150px;
    // background-color: aqua;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      width: 30%;
      height: 100%;
      // background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;

      .img {
        width: 80%;
        height: 80%;
        // border: 1px solid red;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .right {
      width: 70%;
      height: 100%;
      // background-color: beige;

      .sppp {
        width: 100%;
        height: 50px;
        // background-color: pink;
        margin-top: 15px;
      }

      span {
        padding-left: 15px;
      }
    }
  }

  .paixu {
    width: 100%;
    height: 30px;
    // background-color: aqua;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .active {
      color: red;
    }
  }

  .ban {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .banner {
    width: 95%;
    height: 110px;
    background-color: aqua;
    margin-top: 20px;
    border-radius: 10px;

    img {
      width: 100%;
      height: 100%;
      background-color: aqua;
      border-radius: 10px;
    }
  }
}
header {
  width: 100%;
  height: 70px;
  background-color: #00f2ff92;
  display: flex;
  justify-content: center;
  align-items: center;
  // position: fixed;
  // top: 0;
  // margin-top: 70px;

  input {
    width: 80%;
    height: 40px;
    text-align: center;
    color: gray;
    border: none;
    border-radius: 25px;
  }
}
</style>